<template>
  <div class="farmsStockStatistics">
    <div class="back" @click="back()">
      <i class="el-icon-arrow-left"></i> 返回
    </div>
    <!-- 搜索框 -->
    <div class="searchBox">
      <div class="searchBox-l">
        <el-select v-model="params.type" class="select"  clearable placeholder="农资类型">
          <el-option
            v-for="item in NZZLlist"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <!-- 入库方式 -->
        <el-select
          v-if="this.$route.params.pageId === '1'"
          v-model="params.receiptType"
           clearable
          class="select"
          placeholder="入库方式"
        >
          <el-option
            v-for="item in receiptType"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <!-- 农事类型 -->
        <!-- <el-select
          v-model="params.farmingType"
          class="select"
          placeholder="农事类型"
          v-if="this.$route.params.pageId === '2'"
        >
          <el-option
            v-for="item in receiptType"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select> -->
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="timeChange"
        >
        </el-date-picker>
        <el-button type="primary" @click="search()">查 询</el-button>
      </div>
    </div>
    <table class="table" border="0" cellspacing="0">
      <thead>
        <tr class="tableHeader">
          <th class="name">农资名称</th>
          <th class="type">农资类型</th>
          <th class="specification">规格</th>
          <th class="stockType">{{pageId === '1'?'入库类型':'出库类型'}}</th>
          <th class="num">数量</th>
          <th class="time">时间</th>
          <th class="user">操作人</th>
        </tr>
      </thead>
      <tbody>
        <tr class="tbodyList" v-for="item in tableData" :key="item.index">
          <td class="name" style="text-align: left">
            <div class="farmsStockName">
              {{item.name}}
            </div>
            <div class="company">{{item.manufacturer}}</div>
          </td>
          <td class="type">{{item.type}}</td>
          <td class="specification">{{item.specifications}}</td>
          <td class="stockType">{{pageId === '1'?item.receiptType:'农事出库'}}</td>
          <td class="num">{{item.num}}</td>
          <td class="time">{{pageId === '1'?item.purchaseTime:item.applyTime}}</td>
          <td class="user">{{pageId === '1'?item.purchaser:item.applicant}}</td>
        </tr>
      </tbody>
    </table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
       @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="3"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getFarmsStockPurchasePageApi,
  getFarmsStockApplyPageApi
} from '@/api/farmStock'
import { getSysSonDictListApi } from '@/api/dict'
export default {
  name: 'SevencolorUserIndex',

  data () {
    return {
      params: {
        current: 1,
        pageSize: 3,
        startTime: '',
        endTime: '',
        type: '',
        receiptType: '',
        farmingType: ''
      },
      currentPage: 1,
      total: 1,
      NZZLlist: [], // 农资种类
      receiptType: [], // 入库类型
      time: [],
      tableData: [],
      pageId: ''
    }
  },

  mounted () {
    this.params.baseId = this.$store.getters.userInfo.baseId
    this.getfarmsStockStatistics(this.$route.params.pageId)
    this.getDict(this.$route.params.pageId)
    this.pageId = this.$route.params.pageId
  },

  methods: {
    // 列表 pageId入库1 出库2
    async getfarmsStockStatistics (pageId) {
      console.log(pageId)
      if (pageId === '1') {
        const res = await getFarmsStockPurchasePageApi(this.params)
        this.tableData = res.data.records
        this.total = res.data.total
      } else if (pageId === '2') {
        const res = await getFarmsStockApplyPageApi(this.params)
        this.tableData = res.data.records
        this.total = res.data.total
        console.log(this.total)
      } else {
        this.$router.push({
          path: '/shuzhongtian/farmsStock'
        })
      }
    },
    async getDict (pageId) {
      console.log(pageId)
      if (pageId === '1') {
        const res2 = await getSysSonDictListApi('RKLX')
        this.receiptType = res2.data.reverse()
      } else if (pageId === '2') {
        const res2 = await getSysSonDictListApi('NS')
        this.receiptType = res2.data
      }
      const res1 = await getSysSonDictListApi('NZZL')
      this.NZZLlist = res1.data
    },
    // 分页
    handleCurrentChange (val) {
      this.params.current = val
      this.getfarmsStockStatistics(this.$route.params.pageId)
    },
    // 时间触发
    timeChange () {
      this.params.startTime = this.time[0]
      this.params.endTime = this.time[1]
    },
    search () {
      this.getfarmsStockStatistics(this.$route.params.pageId)
    },
    // 返回
    back () {
      this.$router.push({
        path: '/shuzhongtian/farmsStock'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.farmsStockStatistics {
  width: 80.2083vw;
  height: 48.4375vw * 0.834;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  padding: 1.0417vw;
  .searchBox {
    width: 78.2083vw;
    height: 6.25vw * 0.834;
    line-height: 6.25vw * 0.834;
    background: #ffffff;
    border-radius: 20px 20px 20px 20px;
    margin-left: 1vw;
    display: flex;
    justify-content: space-between;
    padding: 0 1.0417vw;
    .searchBox-l {
      height: 3.125vw * 0.834;
      //解决下拉框偏移
      ::v-deep .el-select > .el-input {
        height: 3.5vw;
      }
    }
    .select {
      margin-right: 1.0417vw;
      width: 322px * 0.834;
      height: 3.125vw * 0.834;
      border-radius: 12px 12px 12px 12px;
    }
    .searchInp {
      width: 322px * 0.834;
      height: 3.125vw * 0.834;
      margin-right: 1vw;
    }
  }
  .table {
    width: 78.125vw;
    thead {
      width: 77.0833vw;
      height: 4.1667vw * 0.834 !important;
      background-color: #e4e7e9;
      font-weight: 500;
      font-size: 1.25vw;
      color: #647f93;
    }
    .tbodyList {
      width: 77.0833vw;
      height: 8.3333vw * 0.834;
      border-radius: 0px 0px 0px 0px;
      font-size: 1.25vw;
      text-align: center;
      .name {
        width: 18.8333vw;
        padding-left: 0.7813vw;
      }
      .company {
        color: #999;
        margin-top: 0.8604vw;
      }
    }
    .tbodyList:nth-child(odd) {
      background: #f4f4f4;
    }
    .tbodyList:nth-child(even) {
      background: #fff;
    }
  }
}
.pagination {
  margin-top: 4.0417vw *0.834;
  text-align: center;
}
</style>
